<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>ALLADYN Project homepage</title>
<link rel="stylesheet" href="../al.css" type="text/css">
<script src="../js/Alladyn.js" type="text/javascript"></script>
<script src="../js/subpaths.js" type="text/javascript"></script>
</head>

<body background="../img/bg.gif" onload="Alladyn();main()">
<div id="menu1" style="position:absolute; left:-100; top:290; z-index:3"><a href="contact.html"><img src="../img/m_feed_eng.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu2" style="position:absolute; left:-100; top:130; z-index:3"><a href="desc.html"><img src="../img/m_desc_eng.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu3" style="position:absolute; left:-100; top:170; z-index:3"><a href="gallery.html"><img src="../img/m_gallery_eng.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu4" style="position:absolute; left:-130; top:210; z-index:3"><a href="docs.html"><img src="../img/m_docs_eng.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu5" style="position:absolute; left:-100; top:250; z-index:3"><a href="down.html"><img src="../img/m_down_en.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu6" style="position:absolute; left:-100; top:90; z-index:3"><a href="about.html"><img src="../img/m_about_eng.gif" width="119" height="20" border="0"  alt=""/></a></div>
<div id="blue1" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue2" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue3" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue4" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue5" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue6" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="alll" style="position:absolute; left:312; top:-50; z-index:8"><img src="../img/name_half1.gif" width="104" height="26"/></div>
<div id="allr" style="position:absolute; left:313; top:-50; z-index:8"><img src="../img/name_half2.gif" width="101" height="26"/></div>
<div id="poziom" style="position:absolute; left:0; top:-50; z-index:7"><img src="../img/blue_d.gif" width="780" height="34"/></div>
<div id="pozioms" style="position:absolute; left:0; top:-50; z-index:7"><img src="../img/blue_d.gif" width="780" height="18"/></div>
<div id="pozioms2" style="position:absolute; left:0; top:-20; z-index:7"><img src="../img/blue_mid.gif" width="780" height="6"/></div>
<div id="pozioms3" style="position:absolute; left:0; top:-20; z-index:7"><img src="../img/blue_mid.gif" width="780" height="3"/></div>
<div id="dhdsb" style="position: absolute; left: 13; top: -50; z-index: 10"><img src="../img/dhdsbig.gif" width="574" height="17"/></div>

<div id="title" style="position: absolute; left: 140; top: -50; z-index: 2"><img src="../img/t_docs.gif" width="562" height="35"></div>
<div id="docsmenu" class="content" style="position: absolute; left: 140; top: 160; z-index: 2; color: #8888AA; width: 562; text-align: center;">[<a href="docs5.html">&lt; Previous chapter</a>] [<a href="docs.html">Table of contents</a>] [<a href="docs7.html">Next chapter &gt;</a>]</div>

<div class="content" id="content" style="position: absolute; left: 140; top: 200; width:562; z-index: 2">
<div class="content">
	<a name="r6"></a><span class="header">6. Simple animations - animation module in practice.</span><br />
	In this chapter we will show you on examples how easy to use is Alladyn'a animation module for creating animations for webpages.<br /><br />
	<a name="r61"></a><span class="bold">6.1. Using <span class="b">vkf</span> method for defining keyframes.</span><br />
	Using <span class="b">vkf</span> method we add new keyframes to the layer'a animation path. In this way we can program even composite movement of a layer.<br />
	To animate the layer during the movement of the whole group, we have to set the <span class="b">go</span> property of it's <span class="b">van</span> object to <span class="i">true</span> (<span class="i">vlay.layer.van.go=true</span>). We activate the animation with a call <span class="b">STPE.go()</span>.<br /><br />
	<a href="docs_ex61.html">Example 6.1</a> - this example shows simple animation.<br /><br />
	<a name="r62"></a><span class="bold">6.2. Different animation types.</span><br />
	The <span class="b">mode</span> property of the layer's <span class="b">van</span> object is responsible for the behavior of the animation.<br />
	There are three animation types available:<br />
	<ul>
	<li><span class="b">loop</span> - when the animation reaches the last keyframe, animation is restarted and played beginning from first keyframe,
	<li><span class="b">ping</span> - when the animation reaches the last keyframe, it is restarted and played from the last keyframe to the first one (animation bounce),
	<li>normal type - when the animation reaches the last keyframe, animation is stopped. This is the default type  and it is used when the <span class="i">mode</span> property contains values other than <span class="i">loop</span> or <span class="i">ping</span>.
	</ul>
	<a href="docs_ex62.html">Example 6.2</a> - this example shows different animation types.<br /><br />
	<a name="r63"></a><span class="bold">6.3. Grouping elements.</span><br />
	Alladyn allows to group layers into independent groups of movement. This gives the webmaster latitude in creating animation. Especially it makes dividing animation into stages very easy - respective stages can be organized into different groups of movement and activated when the animation of previous stage/group finishes. The division into groups allows creating a lot of movements, which are independent from each other. They can be activated in different moments, at any time. Last, but not least, grouping allows moving one group of elements with the different synchronization (with different interval between frames) than other groups.<br /><br />
	For default, every layer belongs to the group "". You can change the group name by typing it into the <span class="b">group</span> property of the layer's <span class="b">van</span> object.
</div>
<div class="ex1">
	vlay.layer.van.group="new_group"
</div>
<div class="content">
	To activate the animation of the current group you have to pass it's name as a call parameter for <span class="b">STPE.go</span> method:
</div>
<div class="ex1">
	STPE.go("new_group",100)
</div>
<div class="content">
	<a href="docs_ex63.html">Example 6.3</a> - this example shows element grouping.<br />
<br />
<center>[<a href="docs5.html">&lt; Previous chapter</a>] [<a href="docs.html">Table of contents</a>] [<a href="docs7.html">Next chapter &gt;</a>]</center>
</div>
<br />
</div>
</body>
</html>
